<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
    创建一个vue实例，初始化渲染
    1.准备容器（vue所管理的范围）
    2.引包（开发版本包/生产版本包）官网
    3.创建实例
    4.添加配置项=>完成渲染
     -->
     <div id="app">
        <!-- 这里将来会编写一些用于渲染的代码逻辑 -->
        <h1>{{ msg }}</h1>
        <a href="#">{{ count }}</a>
     </div>
     <!-- 引入的是开发版本包-包含完整的注释和警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
     <script>
        //一旦引入Vuejs核心包，在全局环境，就有了vue构造函数
        const app = new Vue({
            //通过el配置选择器，指定vue管理的是哪个盒子
            el: '#app',
            //通过data提供数据
            data: {
                msg: 'Hello 传智播客',
                count: '666'
            }
        })
     </script>
</body>
</html>